import React from 'react';
import './style.css'
// 引入编辑器以及编辑器样式
import BraftEditor from 'braft-editor';
import 'braft-editor/dist/braft.css';
// antd
import { Row, Col, Select, Button } from 'antd';

export default class DepictForm extends React.Component {
    constructor(props) {
        super(props);
        this.state = {};
    }

    handleChange = (content) => {
        console.log(content)
    }

    handleRawChange = (rawContent) => {
        console.log(rawContent)
    }

    render() {
        const editorProps = {
            height: 500,
            contentFormat: 'html',
            onChange: this.handleChange,
            onRawChange: this.handleRawChange
        }

        const buttonColor = {
            loadD: '#5bd0ce',
            editD: '#5cb85c',
            loadP: '#428bca',
            upP:   '#d9534f',
            downP: '#f0ad4e',
            reset: '#abbac3'
        }

        return (
            <div>
                <Row gutter={8} className="mt10">
                    <Col span={4}>
                        <Select className="w100" placeHolder="请选择描述模板"></Select>
                    </Col>
                    <Col span={2}>
                        <Select className="w100" placeHolder="请选语言"></Select>
                    </Col>
                    <Col className="cbtnr10">
                        <Button style={{backgroundColor: buttonColor.loadD}}>加载描述</Button>
                        <Button style={{backgroundColor: buttonColor.editD}}>编辑描述</Button>
                        <Button style={{backgroundColor: buttonColor.loadP}}>加载图片</Button>
                        <Button style={{backgroundColor: buttonColor.upP}}>上方关联促销</Button>
                        <Button style={{backgroundColor: buttonColor.downP}}>下方关联促销</Button>
                        <Button style={{backgroundColor: buttonColor.reset}}>重置</Button>
                    </Col>
                </Row>
                <div className="demo">
                    <BraftEditor {...editorProps} />
                </div>
            </div>
        )
    }
}